<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <!-- 显示 msg 的值 -->
        <p>{{msg}}</p>
        <!-- 点击按钮时，通过 v-on:click 指令触发对应的方法，将 msg 的值修改为 "今天天气好热啊" -->
        <button v-on:click="msg='今天天气好热啊'">点击改变内容</button>
        <!-- 点击按钮时，通过 @click 指令（v-on:click 的简写）使 counter 自增 1，并实时显示 -->
        <button @click="counter++">点击自增+1</button>点击次数{{counter}}
        <!-- 点击按钮时，调用 changeContent 方法来修改 msg 的值 -->
        <button @click="changeContent()">点击改变</button>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app", // 指定 Vue 实例管理的 DOM 元素为 id 为 "app" 的 div
            data: {
                msg: "今天天气晴", // 定义初始的 msg 值
                counter: 0 // 定义初始的 counter 值为 0
            },
            methods: {
                // 定义 changeContent 方法来修改 msg 的值,:function可以被省略
                changeContent() {
                    // 当此方法被调用时，将 msg 修改为 "测试改变"
                    this.msg = "测试改变"
                }
            }
        })
    </script>
</body>
</html>